<template>
	<view class="page">
		<view class="address-input">
			<view class="list-input">
				<view class="title">
					<text>收货人</text>
				</view>
				<view class="content">
					<input type="text" placeholder="请填写收货人姓名" v-model="value.name">
				</view>
			</view>
			<view class="list-input">
				<view class="title">
					<text>手机号</text>
				</view>
				<view class="content">
					<input type="tel" placeholder="请填写收货人手机号" v-model="value.mobile">
				</view>
			</view>
			<view class="list-input">
				<view class="title">
					<text>收货地址</text>
				</view>
				<view class="content" @click="picker">

					<text v-if="isAddress">省市区</text>
				</view>


				<view>{{str}} </view>


			</view>
			<view class="list-textarea">
				<view class="title">
					<text>详细地址</text>
				</view>
				<view class="content">
					<textarea type="tel" placeholder="街道/楼牌号等" v-model="value.buildNum" />
				</view>
			</view>
		</view>
		<view class="tag-default">

			<view class="default-address">
				<view class="title">
					<text>默认地址</text>
				</view>
				<view class="switch-default">
					<switch class="red sm" color="#0077EE !important" :checked='checked' @change="changes"></switch>
				</view>
			</view>
		</view>
		<view class="footer-btn">
			<view class="btn" @click="delAddress" v-if="id">
				<text>删除</text>
			</view>
			<view class="btn" @click="setAddressEdit">
				<text>保存</text>
			</view>
		</view>
	</view>







</template>

<script>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	import {
		setAddress,
		delAddress
	} from '@/config/api.js'
	export default {
		data() {

			return {
				isAddress: true,
				visible: false,
				maskCloseAble: true,
				str: '',
				defaultValue: '',
				// defaultValue: ['河北省','唐山市','丰南区'],
				column: 3,
				id: null,
				value: {
					name: '',
					mobile: null,
					buildNum: '',
					address: '',
					latitude_wx: null,
					longitude_wx: null
				},
				checked: true
			}
		},
		onLoad(params) {
			let title = '新建收货地址';
			const address = uni.getStorageSync('_address');
			if (address) {
				title = '编辑收货地址';
				this.value.buildNum = address.address;
				this.value.latitude_wx = address.latitude_wx;
				this.value.longitude_wx = address.longitude_wx;
				this.value.name = address.name;
				this.value.mobile = address.mobile;
				this.checked = !!address.is_default;
				this.id = address.id;
			}
			uni.setNavigationBarTitle({
				title: title
			})
		},
		components: {
			cityPicker
		},
		methods: {
			changes(e) {
				this.checked = e.detail.value;
			},
			delAddress() {
				delAddress({
					id: this.id
				}).then(res => {
					uni.$u.toast('成功！')
				})
			},
			open() {
				this.visible = true
			},
			confirm(val) {
				console.log(val)
				this.str = JSON.stringify(val)
				this.visible = false
			},
			cancel() {
				this.visible = false
			},
			setAddressEdit() {
				let _this = this;
				const sendata = {
					address: _this.value.address + _this.value.buildNum,
					latitude_wx: _this.value.latitude_wx,
					longitude_wx: _this.value.longitude_wx,
					name: _this.value.name,
					is_default: _this.checked ? 1 : 0,
					mobile: _this.value.mobile
				};
				if (this.id) sendata['id'] = this.id;
				setAddress(sendata).then(data => {
					uni.$u.toast('成功！')
				}).catch(err => {
					console.log(err)
				})
			},
			picker() {
				this.isAddress = false;
				const _this = this;
				uni.getLocation({
					type: 'wgs84',
					// 返回可以用于uni.openLocation的经纬度
					success: function success(res) {
						console.log('经度: ' + res.latitude);
						console.log('纬度: ' + res.longitude);
						uni.chooseLocation({
							latitude: res.latitude,
							longitude: res.longitude,
							success: function(res) {
								console.log(res)
								_this.str = res.address
								_this.value.address = res.address
								_this.value.latitude_wx = res.latitude
								_this.value.longitude_wx = res.longitude
							},
							fail: function(err) {
								console.error('选择地点失败:', err);
							}
						})
					},

					fail: function fail(err) {
						console.error('获取位置失败:', err);
					}
				});

			}
		},

		onShareTimeline(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: 'data-cityPicker省市区地址选择器！'
			}
		}
	}
</script>

<style lang="scss">
	@import 'AddressEdit.scss';
</style>